import React from "react";
import "./Header.css";
export default class Header extends React.Component {
	//状态
	state = {
		toparr: [
			//导航栏数据
			{ title: "首页", checked: true },
			{ title: "HTML", checked: false },
			{ title: "CSS", checked: false },
			{ title: "JAVASCRIPT", checked: false },
			{ title: "REACT", checked: false },
		],
		index: 0, //控制导航下标样式选中
	};

	updateChecked = function (i) {
		return () => {
			// 获取state数据重新赋值
			let newtoparr = this.state.toparr;
			newtoparr[this.state.index].checked = false;
			newtoparr[i].checked = true;

			this.setState({
				toparr: newtoparr, //设置toparr新数据
				index: i, //设置下标数据
			});
		};
	};
	render() {
		return (
			<div className="header">
				<ul>
					{this.state.toparr.map((item,index) => {
						return (
							<li
								onClick={this.updateChecked(index)}
								className={item.checked ? "active" : null}
								key={index}
							>
								{item.title}
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}
